<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="navbar.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'task.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.min.css" />

  </head>
  
  <body class="body">
    <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">

	  <div class="row">
		
		
		<!-- 导入左侧部分 -->
		<jsp:include page="side.jsp">
			<jsp:param value="goal" name="tag"/>
		</jsp:include>
	
	
		<div class="span9">
			
			<ul class="breadcrumb" style="border:1px solid #ddd;margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px;">
				<li class="active">

					<a href="goal.jspx?m=new&id=${requestScope.goal.goalId }"><i class="icon-th"></i>${requestScope.goal.goalName }</a>
				</li>
				<li style="float:right">
					<i class="icon-edit"></i><a href="goal.jspx?m=update&id=${requestScope.goal.goalId }" class="link-black">编辑</a>
				</li>
			</ul>
			
		
		
			<!-- 循环相加任务的进度得出目标的进度 -->
			<c:set var="total" value="0"></c:set>
			<c:forEach items="${requestScope.taskpage.result }" var="t">
				<c:set var="total" value="${requestScope.total + t.taskRate }" scope="request" ></c:set>
			</c:forEach>
			
			
			
			<div class="wall" style="border:1px solid #ddd;padding:10px;">
				<p>${requestScope.goal.desc}</p>

				<div class="progress progress-danger" >
				
				<%-- <div class="bar" style="width:${(requestScope.total)/requestScope.taskpage.result.size() }%"><fmt:formatNumber  type="number" value="${(requestScope.total)/requestScope.taskpage.result.size() }"></fmt:formatNumber>%</div> --%>
				<div class="bar" style="width:${request.goalrate.goalRate}%"><fmt:formatNumber  type="number" value="${request.goalrate.goalRate}"></fmt:formatNumber>%</div>
				
				
				</div>
			</div>	
			<!-- 只有项目经理才有资格添加新任务 -->	
			<c:choose>
				<c:when test="${sessionScope.up.role == 'manager' }">
					<div class="page-header">
					<a href="goal.jspx?m=addTask&id=${requestScope.goal.goalId }" class="btn btn-success"><i class="icon-plus icon-white"></i>添加新任务</a>
				</div>
				</c:when>
			</c:choose>	
				


				
				<c:forEach items="${requestScope.taskpage.result }" var="t">
				    <table class="table table-condensed">
					    <tbody>
						    <tr>
							    <td><i class="icon-bookmark"></i><span style="color:green;">${t.taskName }</span></td>
							    <td>负责人：${t.user.userName }</td>
							    <td>
							    <c:choose>
									<c:when test="${t.taskRate == 0 }">
										<span style="color:blue;">${t.state }</span>&nbsp;&nbsp;
										<c:if test="${sessionScope.user.userName == t.user.userName }">
											<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
										</c:if>
										<c:if test="${sessionScope.up.role == 'manager' }">
											<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
										</c:if>
									</c:when>
									
									<c:when test="${t.taskRate == 100 }">
										<span style="color:green;">${t.state }</span>&nbsp;&nbsp;
										<c:if test="${sessionScope.user.userName == t.user.userName }">
											<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
										</c:if>
										<c:if test="${sessionScope.up.role == 'manager' }">
											<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
										</c:if>
									</c:when>
									
									<c:when test="${t.taskRate > 0 or taskRate < 100 }">
										
										<c:if test="${t.state == '进行中' }">
											<span style="color:#0055E6;">${t.state }</span>&nbsp;&nbsp;
											<c:if test="${sessionScope.user.userName == t.user.userName }">
												<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
											</c:if>
											<c:if test="${sessionScope.up.role == 'manager' }">
												<a href="goal.jspx?m=updateTask&id=${t.taskId }">修改任务</a>
											</c:if>
										</c:if>
										<c:if test="${t.state == '已过期' }">
											<span style="color:red;">${t.state }</span>
										</c:if>
									</c:when>
								
									<c:when test="">
										
									</c:when>
									
								</c:choose>
							    </td>
						    </tr>
						    <tr>
						    
						    
						    
						   
						    	<td id="startDate">开始时间：${t.startTime }</td>
								<td id="endDate">结束时间： ${t.endTime }</td>
								
						    	<td>级别： ${t.level }</td>
						    </tr>
						    <tr> 
						    	<td  colspan="4">${t.desc}</td>
						    </tr>
						    <tr>
							    <td colspan="4">
							     <c:choose>
									<c:when test="${t.taskRate == 0 }">
										<div class="progress progress-success">
									 		 <div class="bar" style="width:${t.taskRate}%">${t.taskRate }%</div>
										</div>
									</c:when>
									
									<c:when test="${t.taskRate == 100 }">
										<div class="progress progress-success">
									 		 <div class="bar" style="width:${t.taskRate}%;">${t.taskRate }%</div>
										</div>
									</c:when>
									
									<c:when test="${t.taskRate > 0 or taskRate < 100 }">
										
										<c:if test="${t.state == '进行中' }">
											<div class="progress progress-primary">
									 			 <div class="bar" style="width:${t.taskRate}%;">${t.taskRate }%</div>
											</div>
										</c:if>
										
									</c:when>
									<c:when test="${t.state == '已过期' }">
										<span style="color:red;">已过期</span>
									</c:when>
									
									<c:when test="${t.state == '未开始' }">
										<span style="color:blue;">未开始</span>
									</c:when>
									
								</c:choose>
							    
							    
							    
							    
							    
							    
							    
							    
							    	<%-- <div class="progress progress-success">
									  <div class="bar" style="width:${t.taskRate}%">${t.taskRate }%</div>
									</div>
							  --%>
							 
							 
							 
							 
							 
							 
							 
							 
							 
							 
							    </td>
						    	
						    </tr>
					    </tbody>
				    </table>
				    
				</c:forEach>
				
      			<!--以下是分页功能，在页面显示靠右时使用 pagination-right而不是pull-right -->
			    <div class="pagination pagination-right">
				    <ul>
				    	<c:choose>
					  		<c:when test="${requestScope.taskpage.pageNum == 1 }">
					  			 <li><a href="#">首页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?m=new&p=1">首页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.taskpage.pageNum == 1}">
					  			<li><a href="#">上一页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?m=new&p=${requestScope.taskpage.pageNum - 1 }">上一页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.taskpage.pageNum == requetScope.taskpage.totalPages }">
					  			<li><a href="#">下一页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?m=new&p=${requestScope.taskpage.pageNum + 1 }">下一页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					  	<c:choose>
					  		<c:when test="${requestScope.taskpage.pageNum == requestScope.taskpage.totalPages }">
					  			<li><a href="#">尾页</a></li>
					  		</c:when>
					  		<c:otherwise>
					  			<li><a href="goal.jspx?m=new&p=${requestScope.taskpage.totalPages }">尾页</a></li>
					  		</c:otherwise>
					  	</c:choose>
					   
					  
				    </ul>
				    </div>							


					
					<%-- 	<dt style="margin-top:15px"><i class="icon-bookmark"></i><a href="#">${t.taskName }</a>&nbsp;&nbsp;&nbsp;[${t.user.userName }]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							
								<c:choose>
									<c:when test="${t.taskRate == 0 }">
										<c:set target="${t }" property="state" value="新任务"></c:set>
										<span style="color:blue;">新任务</span>&nbsp;&nbsp;&nbsp;&nbsp;
										
										<a href="" >修改进度</a>
									</c:when>
									<c:when test="${t.taskRate > 0 || taskRate < 100 }">
										<c:set target="${t }" property="state" value="进行中"></c:set>
										<span style="color:black;">进行中</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" >修改进度</a>
									</c:when>
									<c:when test="${t.taskRate == 100 }">
										<c:set target="${t }" property="state" value="已完成"></c:set>
										<span style="color:green;">已完成</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">修改进度</a>
									</c:when>
								</c:choose>
							
						
						</dt>
						<dd>
        						    
        						<!-- <table class="table">
									<thead>
									<tr>
									<th>
									Start date
									<a id="dp4" class="btn small datepicker" data-date="2012-02-20 " data-date-format="yyyy-mm-dd" href="#">Change</a>
									</th>
									<th>
									End date
									<a id="dp5" class="btn small datepicker" data-date="2012-02-25" data-date-format="yyyy-mm-dd" href="#">Change</a>
									</th>
									</tr>
									</thead>
									<tbody>
									<tr>
									<td id="startDate">2012-02-01</td>
									<td id="endDate">2012-02-14</td>
									</tr>
									</tbody> 
									</table>-->
        				</dd> --%>
        			
        					
        					

			
			
		</div>

	  </div>
	</div>
	
	
	<script type="text/javascript" src="styles/jquery/jquery.js"></script>
	<script type="text/javascript" src="styles/datepicker/js/bootstrap-datepicker.js"></script>
	
	<script type="text/javascript">
	
	
		$(document).ready(function(){
			$("#btnSubmit").click(function(){
				$("#myform").submit();
			});
			
			$(".datepicker").datepicker();
			
		});
	</script>
	
  </body>
</html>
